<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ECharts 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/jformer"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"
    />
  </head>
  <body>
    <div id="app"><j-former v-bind:config="config"></j-former></div>
    <script>
      Vue.component('e-charts', {
        template: '<div ref="container" v-bind:style="styles"></div>',
        props: {
          options: Object
        },
        data() {
          return { instance: null }
        },
        computed: {
          styles() {
            return {
              width: this.width || '100%',
              height: this.height || '100%'
            }
          }
        },
        watch: {
          options: {
            deep: true,
            handler(value) {
              this.instance.setOption(value)
            }
          }
        },
        mounted() {
          this.instance = window.echarts.init(this.$refs.container)
          this.instance.setOption(this.options)
        }
      })

      new Vue({
        data() {
          return {
            config: <%- model %>
          }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
